<template>
	<u-popup v-model="internalShow" mode="center" :mask-close-able="false" border-radius="20">
		<view class="reservation-popup">
			<view class="title-wrapper">
				<view class="exit"></view>
				<view class="title">{{ title }}</view>
				<view class="exit" @click="onCancel">
					<image class="exit-icon" src="@/img/yangcan/ic_exit.png"></image>
				</view>
			</view>
			<view class="content-wrapper">
				<view v-if="type === 'dialog'" class="content-1">{{ content }}</view>
				<view v-if="type === 'text'" class="content-2">{{ content }}</view>
			</view>
			<view v-if="type === 'dialog'" class="btn-group">
				<view class="btn primary" @click="onCancel">{{ cancelText }}</view>
				<view class="btn defalult" @click="onConfrim">{{ confirmText }}</view>
			</view>
			<view v-else-if="type === 'text'" class="btn-text" @click="onConfrim">确定</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			type: {
				type: String,
				default: "dialog", // text-提示窗口 dialog-询问窗口
			},
			title: {
				type: String,
				default: '提示'
			},
			content: {
				type: String,
				default: '',
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确定'
			}
		},
		data() {
			return {
				internalShow: false,
				realContent: '',
			}
		},
		watch: {
			show: {
				handler(newVal) {
					this.internalShow = newVal;
				},
				immediate: true,
				deep: true,
			},
			internalShow: {
				handler(newVal) {
					this.$emit("updateShow", newVal);
				},
				immediate: true,
				deep: true,
			},
			content: {
				handler(newVal) {
					this.realContent = newVal;
				},
				immediate: true,
				deep: true,
			}
		},
		methods: {
			onCancel() {
				this.realContent = '';
				this.$emit("cancel");
			},
			onConfrim() {
				this.$emit("confirm", this.realContent);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reservation-popup {
		width: 587rpx;
		height: 357rpx;
		border-radius: 20rpx;
		.title-wrapper {
			width: 100%;
			height: 69rpx;
			background: linear-gradient(to right, #ff8d1a, #FF6100);
			
			// #FE8F1C #FF6100
			display: flex;
			align-items: center;
			.exit {
				width: 69rpx;
				height: 69rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				// background-color: #FFFFFF;
				.exit-icon {
					width: 40%;
					height: 40%;
				}
			}
			.title {
				flex: 1;
				text-align: center;
				font-family: SourceHanSansCN;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.content-wrapper {
			height: 191rpx;
			margin: 0 17rpx;
			border-bottom: 1rpx solid #bfbfbf;
			display: flex;
			align-items: center;
			justify-content: center;
			.content-1 {
				max-width: 445rpx;
				font-family: SourceHanSansCN;
				font-size: 24rpx;
				color: #000000;
			}
			.content-2 {
				font-family: SourceHanSansCN;
				font-size: 39rpx;
				font-weight: bold;
				color: #ff8616;
			}
		}
		.btn-group {
			height: 92rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn {
				width: 165rpx;
				height: 50rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				margin-right: 25rpx;
			}
			.btn:last-child {
				margin-right: 0;
			}
			.defalult {
				background-color: #d9d9d9;
				color: #7f7f7f;
			}
			.primary {
				background-color: #FF770D;
				color: #FFFFFF;
			}
		}
		.btn-text {
			height: 92rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>